<template>
	<view>
		<view class="my-orders-top-bar-containter">
			<block v-for="(item, index) in arrTabIndex" :key="index">
				<!--bindtap不能给响应事件传递参数，改用data-index 在响应函数里采用event.currentTarget.dataset.index取数据-->
				<view :class="[
					'my-orders-top-bar-title',
					{ selected: selectTap == index },
				]" @tap="switchTap(index)">
					{{ arrTabTxt[index] }}
				</view>
			</block>
		</view>
		<view v-if="arrShopItems.length === 0" class="shopping-cart-empty-component-container">
			<view>
				<image mode="widthFix" class="icon_shopping_cart" src="../../static/img/apollo/search_empty.png" />
				<view class="none_data">暂无数据</view>
			</view>
		</view>
		<view class="invoice_list" v-if="arrShopItems.length !== 0">
			<view class="my-orders-index-shop-wrap">
				<block v-for="(item, i) in arrShopItems" :key="item.orderNo">
					<!--我的订单-商家Item-->
					<view class="my-orders-shop-item-containter">
						<view class="my-orders-shop-item-top">
							<view class="my-orders-shop-item-top-left">
								<image class="my-orders-shop-item-top-left-shop"
									src="../../static/img/shoppingCart/icon_shop.png" />
								<view class="my-orders-shop-item-top-left-shop-name">{{
									mallConfig.storeName
								}}</view>
								<view class="my-orders-shop-item-top-left-arrow"> > </view>
							</view>
							<view class="my-orders-shop-item-top-tips">
								<block v-if="!item.invoiced">
									<span v-if="selectTap === 0" class="wait-pay-tips">未申请</span>
									<span v-if="selectTap === 1" class="wait-pay-tips">申请中</span>
									<span v-if="selectTap === 2" class="wait-pay-tips">已开票</span>
								</block>
							</view>
						</view>
						<view class="my-orders-shop-item-detail">
							<block v-for="(product, index) in item.products" :key="product.productId">
								<view class="my-orders-shop-item-detail-item" @tap="toInvoiceDetail(item, item.id)"
									:key="index">
									<view class="my-orders-shop-item-detail-item-left">
										<image class="my-orders-shop-item-detail-item-left-img"
											:src="product.productSquareUrl" />
										<view class="my-orders-shop-item-detail-item-left-txt">
											<view class="my-orders-shop-item-detail-item-left-title">{{ product.productName
											}}
											</view>
										</view>
									</view>
									<view class="my-orders-shop-item-detail-item-right">
										<!-- <view class="my-orders-shop-item-detail-item-right-money">￥{{ product.price }}
										</view> -->
										<view class="my-orders-shop-item-detail-item-right-cnt">x{{ product.count }}
										</view>
									</view>
								</view>
							</block>
						</view>
						<!-- <view class="my-orders-shop-item-total" v-if="item.couponConfig !== null">
							商品优惠:
							<span style="color: rgba(242, 85, 0, 1); margin-left: 5rpx"
								class="my-orders-shop-item-total-money">-￥{{ item.couponAmount || 0 }}</span>
						</view> -->
						<view class="my-orders-shop-item-total">
							共{{ item.totalCount }}件商品
							<!-- <span class="express_price" v-if="item.expressAmount != 0">包含运费{{ item.expressAmount }}</span> -->
							支付金额:<span style="color: rgba(242, 85, 0, 1)" class="my-orders-shop-item-total-money">￥{{
								item.payAmount }}</span>
						</view>
						<view class="my-orders-shop-item-control">
							<view v-if="selectTap === 0" class="my-orders-shop-item-control-btn gray"
								@tap="toInvoice(item, i)">
								申请</view>
							<view v-if="selectTap === 1" class="my-orders-shop-item-control-btn gray"
								@tap="onCancelInvoice(item, i)">
								取消申请</view>
						</view>
						<view v-if="i !== arrShopItems.length - 1" class="border_bottom_gray"></view>
					</view>
				</block>
			</view>
			<view class="no_more" v-if="curPageCnt === totalPage">- 没有更多了 -</view>
		</view>
	</view>
</template>

<script>
import Big from 'big.js';
import {
	common, invoice
} from '../../services/index.js';
import CouponDetail from '../components/couponDetail/index.vue';
import {
	mapState,
} from "vuex";
export default {
	data() {
		return {
			arrTabTxt: ["待申请", "申请中", "已开票"],
			arrTabIndex: [0, 1, 2],
			selectTap: 0,
			curTabIndex: -1, //当前选中的标题模块
			totalPage: 1, //总页数
			curPageCnt: 0, //当前页码
			arrShopItems: [],
		}
	},
	onLoad(params) {
	},
	components: {
		CouponDetail,
	},
	methods: {
		onShow() {
			this.getList();
		},
		toDetail(item) {
			uni.navigateTo({
				url: "/pages/orderDetail/index?showInvoice=1&orderNo=" + item.orderNo,
			});
		},
		async onCancelInvoice(item) {
			//是否确认取消发票申请
			uni.showModal({
				title: "提示",
				content: "是否确认取消发票申请",
				success: async (res) => {
					if (res.confirm) {
						let res = await invoice.delApplyInvoice(item.orderNo);
						if (res.code === 200) {
							uni.showToast({
								icon: "none",
								title: "取消成功",
								duration: 2000,
							});
							this.getList();
						} else {
							uni.showToast({
								icon: "none",
								title: res.msg,
								duration: 2000,
							});
						}
					}
				},
			});
		},
		async getList(page, size) {
			uni.showLoading();
			let res = {};
			if (this.selectTap === 0) {
				res = await invoice.notapplyList();
			}
			if (this.selectTap === 1) {
				res = await invoice.applyingList();
			}
			if (this.selectTap === 2) {
				res = await invoice.appliedList();
			}
			if (res.code === 200) {
				if (res.data === null) {
					res.data = []
				}
				res.data.forEach((e) => {
					let totalPrice = new Big(0);
					let totalCount = 0;
					let payAmount = new Big(0);
					e.products.forEach((f) => {
						totalCount += f.count;
						f.price = new Big(f.price).div(100); //除100
						totalPrice = totalPrice.plus(f.price.times(f.count)); //数量*价格
						payAmount = new Big(f.payAmount).div(100);
					});
					e.payAmount = payAmount;
					// e.payAmount = new Big(e.payAmount).div(100);
					// e.expressAmount = new Big(e.expressAmount).div(100);
					// e.totalAmount = new Big(e.totalAmount).div(100);
					e.totalCount = totalCount;
					// if (e.couponConfig !== null) {
					// 	e.couponAmount = totalPrice
					// 		.minus(e.totalAmount)
					// 		.minus(e.expressAmount);
					// }
				});
				this.arrShopItems = res.data;
			} else {
				uni.showToast({
					icon: "none",
					title: res.msg,
					duration: 2000,
				});
			}
			uni.hideLoading();
		},
		switchTap(tap) {
			this.selectTap = tap;
			this.getList();
		},
		refreshPage() {
			this.curPageCnt = 0;
			this.arrShopItems = [];
			this.totalPage = 1;
			this.queryNextPageDetails();
		},
		toInvoice(item) {
			uni.navigateTo({
				url: "/pages/invoice/index?orderNo=" + item.orderNo,
			});
		},
		toInvoiceDetail(item, id) {
			let url = "/pages/invoice/index?orderNo=" + item.orderNo + '&selectTap=' + this.selectTap;
			if (id) {
				url += "&id=" + id;
			}
			uni.navigateTo({
				url: url
			});
		},
	},
	computed: {
		...mapState(["userInfo", "userToken", "mallConfig"]),
	},
	mounted() {
	}
}
</script>

<style scoped>
.invoice_list {
	padding-top: 120rpx;
}

.shopping-cart-empty-component-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	background-color: #fff;
	width: 100%;
	height: 560rpx;
}

.shopping-cart-empty-component-container .icon_shopping_cart {
	margin: 160rpx 0 0;
	width: 233rpx;
	height: 194rpx;
}

.shopping-cart-empty-component-container .tips_empty {
	width: 100%;
	height: 28rpx;
	text-align: center;
	font-size: 28rpx;
	line-height: 28rpx;
	font-weight: 500;
	color: rgba(102, 102, 102, 1);
	margin: 10rpx 0 0;
}

.none_data {
	text-align: center;
	margin-top: 15rpx;
	color: #aaa;
}

.my-orders-shop-item-containter {
	position: relative;
	width: 100%;
	background: #fff;
	margin: 20rpx 0;
	display: inline-block;
}

.my-orders-shop-item-top {
	height: 70rpx;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 25rpx;
}

.my-orders-shop-item-top-tips {
	font-size: 28rpx;
	font-weight: bold;
	color: rgba(242, 85, 0, 1);
	line-height: 36rpx;
	margin-right: 30rpx;
}

.my-orders-shop-item-top-left {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
}

.my-orders-shop-item-top-left-shop {
	width: 38rpx;
	height: 32rpx;
	margin: 0 30rpx;
}

.my-orders-shop-item-top-left-shop-name {
	font-size: 28rpx;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
	margin-right: 15rpx;
}

.my-orders-shop-item-top-left-arrow {
	color: #999;
}

.my-orders-shop-item-detail-item {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: space-between;
	padding-bottom: 20rpx;
	margin-right: 25rpx;
}

.my-orders-shop-item-detail-item-left {
	display: flex;
	flex-wrap: nowrap;
	align-items: flex-start;
	justify-content: center;
}

.my-orders-shop-item-detail-item-left-img {
	width: 185rpx;
	height: 181rpx;
	margin-left: 30rpx;
	flex: 0 0 185rpx;
}

.my-orders-shop-item-detail-item-right {
	text-align: right;
	line-height: 50rpx;
	margin-right: 30rpx;
}


.my-orders-shop-item-detail-item-right-money {
	font-size: 28rpx;
	color: rgba(242, 85, 0, 1);
}

.my-orders-shop-item-detail-item-right-cnt {
	font-size: 24rpx;
	color: #999;
}

.my-orders-top-bar-containter {
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 96rpx;
	background: #fff;
	box-shadow: 0px 2px 6px 0px rgba(51, 51, 51, 0.1);
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
}


.my-orders-top-bar-title {
	font-size: 28rpx;
	text-align: center;
	line-height: 96rpx;
	width: 100%;
	color: #666;
}

.selected {
	color: #f25500;
	border-bottom: 4rpx solid #f00;
}


.my-orders-shop-item-detail-item-left-txt {
	margin-left: 10rpx;
}

.my-orders-shop-item-detail-item-left-title {
	width: 377rpx;
	color: #333;
	font-size: 24rpx;
	color: rgba(51, 51, 51, 1);
	line-height: 36rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}


.my-orders-shop-item-total {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	margin: 0 30rpx 20rpx 0;
	color: #666;
	font-size: 24rpx;
}

.my-orders-shop-item-total-money {
	font-weight: bold;
	font-size: 32rpx;
}

.my-orders-shop-item-control {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	border-top: 1rpx solid rgba(230, 230, 230, 1);
	padding: 30rpx 0;
}

.my-orders-shop-item-control-btn {
	width: 173rpx;
	height: 62rpx;
	border-radius: 31rpx;
	text-align: center;
	font-size: 28rpx;
	line-height: 62rpx;
	margin-right: 30rpx;
}


.no_more {
	text-align: center;
	padding: 20rpx 0;
}


.border_bottom_gray {
	height: 30rpx;
	background-color: #eee;
}


.gray {
	border: 1rpx solid rgba(204, 204, 204, 1);
	color: #666;
}
</style>
